<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Arcgis地图</title>
    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 500px;
        }

        .active {
            background-color: aqua;
        }

    </style>
    <script src="static/js/app.js"></script>
</head>
<body>
<div id="map" style="border: 1px solid #000;"></div>
<div>
    半径：<input type="text" value="1000" id="radius"/>m
    <button id="btn_buffer">缓冲区</button>
</div>
<div id="lngLats"></div>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://10.254.0.38/jsapi/3.15/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href=" http://10.254.0.38/jsapi/3.15/esri/css/esri.css"/>
<script type="text/javascript" src="http://10.254.0.38/jsapi/3.15/init.js"></script>

<script type="text/javascript">

    require([
                "esri/map",
                "esri/SpatialReference",
                "esri/Color",
                "esri/graphic",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/layers/GraphicsLayer",
                "esri/geometry/Point",
                "esri/geometry/Circle",
                "esri/geometry/webMercatorUtils",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/symbols/PictureMarkerSymbol",
                "esri/tasks/QueryTask",
                "esri/tasks/query",
                "dojo/dom",
                "dojo/on",
                "dojo/domReady!"
            ],
            function (Map, SpatialReference, Color, Graphic, ArcGISTiledMapServiceLayer, GraphicsLayer, Point, Circle, webMercatorUtils, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, QueryTask, Query, dom, on) {
                var map = null; //地图
                var tileLayer = null;
                var wkId = 4490;
                //var wkId = 4326;
                var spatialReference = new SpatialReference(wkId); //空间参考
                var center = new Point(118.77880836658694, 32.04400280727758, spatialReference);    //中心坐标点
                var roadLayer = new GraphicsLayer();
                var graLayer = new GraphicsLayer();

                //创建地图
                map = new Map("map", {
                    center: center,
                    zoom: 9
                });

                //添加图层
                if (spatialReference.wkid == 4326) {
                    tileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
                } else {
                    tileLayer = new ArcGISTiledMapServiceLayer("http://10.254.0.39:6080/arcgis/rest/services/底图服务/BaseMap_SS_EsriColor_L0L10/MapServer");
                }

                var mapUrl = "http://10.254.0.39:6080/arcgis/rest/services/底图服务/BaseMap_SS_EsriColor_L0L10/MapServer/151";
                var queryTask = new QueryTask(mapUrl);
                var query = new Query();

                map.addLayer(tileLayer);
                map.addLayer(roadLayer);
                map.addLayer(graLayer);

                //添加事件
                map.on("load", function () {
                    map.on("click", mapClick);
                    on(roadLayer, "click", roadClick);
                    on(dom.byId("btn_buffer"), "click", bufferClick);
                });

                //画圆Circle类
                //定义要画的图形的线条颜色
                var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("red");

                // lon 经度 lat纬度（圆的中心点） radius 半径
                function setCircle(lon, lat, radius) {
                    var pt = new Point(lon, lat, spatialReference);
                    var radius = radius;
                    var circle = new Circle({
                        center: pt,
                        geodesic: true,
                        radius: radius
                    });

                    var graphic = new Graphic(circle, symbol);
                    graLayer.clear();
                    graLayer.add(graphic);
                }

                //缓冲区点击事件
                function bufferClick() {
                    var $btn_buffer = $("#btn_buffer");

                    if ($btn_buffer.hasClass("active")) {
                        $btn_buffer.removeClass("active");
                    } else {
                        $btn_buffer.addClass("active");
                    }
                }

                //地图点击事件
                function mapClick(evt) {
                    //取点
                    var mp = evt.mapPoint;
                    if (evt.mapPoint.spatialReference.isWebMercator()) {
                        mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                    } else {
                        mp = evt.mapPoint;
                    }

                    if ($("#btn_buffer").hasClass("active")) {
                        //画圆
                        var radius = $("#radius").val();
                        setCircle(mp.x, mp.y, radius);

                    } else {

                        $('#lngLats').append(mp.x.toFixed(8) + ',' + mp.y.toFixed(8) + '</br>');
                        drawMarker(mp.x, mp.y);
                    }

                }

                //绘制标记
                function drawMarker(x, y) {

//                var markerSymbol = new SimpleMarkerSymbol();
//                markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
//                markerSymbol.setColor(new Color("#00FFFF"));

                    var markerSymbol = new PictureMarkerSymbol({
                        "angle": 0,
                        "xoffset": 0,
                        "yoffset": 12,
                        "type": "esriPMS",
                        "url": "static/images/marker.png",
                        "contentType": "image/png",
                        "width": 24,
                        "height": 24
                    });

                    var point = new Point(x, y, spatialReference);
                    map.graphics.add(new Graphic(point, markerSymbol));
                }

                //查询道路
                function queryRoad() {
                    query.where = "1=1";
                    query.outFields = ["*"];
                    query.returnGeometry = true;
                    queryTask.execute(query, showRoad);
                }

                //显示道路
                function showRoad(result) {
                    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 191, 255]), 6);
                    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, lineSymbol);

                    var html = '';
                    for (var i = 0; i < result.features.length; i++) {
                        var graphic = result.features[i];
                        graphic.setSymbol(fill);
                        roadLayer.add(graphic);

//                    var LXBM = graphic.attributes["LXBM"];
//                    html += '<li>' + LXBM + '</li>';
                    }
                    $('#lngLats').html(html);
                }

                //路线点击事件
                function roadClick(event) {
                    var graphic = event.graphic;
                    alert(graphic.attributes["LXBM"]);
                }
            }
    );
</script>
</body>